<template>
	<div class="mainViewBig" v-bind:style="style">
		<!--头部-->
		<div class="headerTop">
			<div class="TimeForm">
				<div class="state">
					<img src="@/assets/back_manage_img/steadyRyn.png" />
					<div class="DateForm">
						<p>安全生产</p>
						<p><span>{{ timestap }}</span> 天 </p>
					</div>
				</div>
				<div>
					<p class="date">{{ nowDate }} {{ nowWeek }} </p>
					<p class="date">{{ nowTime }}</p>
				</div>
			</div>
			<h1 class="header-title">{{ sysInfo.sysName }}</h1>
			<div class="header-bg"></div>
			<div class="TimeForm2">
				<p class="date"><img :src="weatherImg" />{{ weather }}</p>
			</div>
		</div>
		<div class="large-board main_new">
			<div class="content-item1">
				<dv-border-box-8>
					<div class="nav_box">
						<p class="all_title">发货任务</p>
						<div class="nav_box_contain">
							<div class="_left">
								<div class="_left_row">
									<div class="flex_index">
										<span class="name name2">{{taskDetail.add}}</span>
										<span>今日新增</span>
									</div>
									<div class="flex_index">
										<span class="name name5">{{taskDetail.sending}}</span>
										<span>待发货</span>
									</div>
								</div>
								<div class="_left_row">
									<div class="flex_index">
										<span class="name name4">95.4%</span>
										<span>采购任务完成率</span>
									</div>
									<div class="flex_index">
										<span class="name name4">99.2%</span>
										<span>物料入库准确率</span>
									</div>
								</div>
								<div class="_left_row">
									<div class="flex_index">
										<span class="name name4">98.3%</span>
										<span>订单发货完成率</span>
									</div>
									<div class="flex_index">
										<span class="name name4">98.5%</span>
										<span>库存周转率</span>
									</div>
								</div>
							</div>
							<dv-scroll-board :config="configData" class="zll_board zll_board_bg" />
						</div>
					</div>
				</dv-border-box-8>

			</div>
		</div>
		<div class="large-board large-board2 main_new">
			<div class="content-item2">
				<dv-border-box-8>
					<div class="nav_box">
						<p class="all_title">退货入库任务</p>
						<dv-scroll-board :config="configData2" class="zll_board zll_board_bg" />
					</div>
				</dv-border-box-8>
			</div>
			<div class="content-item3">
				<dv-border-box-8>
					<div class="nav_box">
						<p class="all_title">采购入库</p>
						<dv-scroll-board :config="configData3" class="zll_board zll_board_bg" />
					</div>
				</dv-border-box-8>
			</div>
		</div>
	</div>
</template>

<script>
	import "./bigScreen.scss";
	import resize from "../resize";
	import { formatDate } from "@/plugins/formatDate";

	export default {
		name: "bigScreen",
		data() {
			return {
				style: {}, //缩放样式
				timestap: "0",
				nowTime: "",
				nowDate: "",
				nowWeek: "",
				weather: "晴  0-13 ℃",
				weatherImg: require("@/assets/back_manage_img/qingtian.png"),
				sysInfo: { sysName: "数字化仓储任务及作业动态" },
				showIndex: 0,
				configData: {
					carousel: 'page',
					waitTime: 5000,
					headerBGC: '#0d2235',
					oddRowBGC: '#0d2235',
					evenRowBGC: '#0d2235',
					headerHeight: '50',
					align: ['center', 'center', 'center', 'center', 'center', 'center', 'center',],
					rowNum: 6,
					header: ['发货单号', '客户', '产品数量', '司机', '派单日期', '发货状态'],
					data: []
				},
				taskDetail: { add: 0, sending: 0 },
				configData2: {
					carousel: 'page',
					waitTime: 5000,
					headerBGC: '#0d2235',
					oddRowBGC: '#0d2235',
					evenRowBGC: '#0d2235',
					headerHeight: '50',
					align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center'],
					rowNum: 6,
					header: ['入库类型', '客户名称', '品类', '规格', '入库状态',],
					columnWidth: ['200', '200', '200', '400', '200',],
					data: []
				},
				configData3: {
					carousel: 'page',
					waitTime: 5000,
					headerBGC: '#0d2235',
					oddRowBGC: '#0d2235',
					evenRowBGC: '#0d2235',
					headerHeight: '50',
					align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center'],
					rowNum: 6,
					header: ['采购号', '大类/品类', '物料数量', '入库状态',],
					data: [],
					cgrw: '',
					wlrk: '',
					ddfh: '',
					kczz: '',
				},
			};
		},
		methods: {
			generateRandomInRange(base) {
				const min = base + 0.1;
				const max = base + 0.5;
				// 生成[min,max]区间随机数并保留一位小数
				return parseFloat((Math.random() * (max - min) + min).toFixed(1));
			},
			pageShow() {//页面初始宽高显示 和 页面大小改变监听
				this.style = resize.setScale();
				window.onresize = () => {
					this.style = resize.setScale();
				};
			},
			getdateFormat() {//显示时间
				var _this = this;
				let wk = new Date().getDay();
				let yy = String(new Date().getFullYear());
				let mm = new Date().getMonth() + 1;
				let dd = String(new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate());
				let hou = String(new Date().getHours() < 10 ? "0" + new Date().getHours() : new Date().getHours());
				let min = String(new Date().getMinutes() < 10 ? "0" + new Date().getMinutes() : new Date().getMinutes());
				let sec = String(new Date().getSeconds() < 10 ? "0" + new Date().getSeconds() : new Date().getSeconds());
				let weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六",];
				let week = weeks[wk];
				_this.nowTime = hou + ":" + min + ":" + sec;
				_this.nowDate = yy + "." + mm + "." + dd;
				_this.nowWeek = week;
			},

			getProcureTaskingList() {
				let self = this;
				self.$http({
					url: "/jinl/firstPage/getProcureTaskingList",
					method: "post",
					params: { notToken: true }
				}).then(resp => {
					self.configData3.data = [];
					if (resp.success) {
						let allDatas = [];
						for (let data of resp.result) {
							let tables = [];
							tables[0] = data.procureCode;
							tables[1] = data.processName;
							tables[2] = data.materialCount;
							let storageStatus = data.procureStatus;
							let span = '';
							if (storageStatus == '0') {
								span = '<span style="color: #ffc107">待入库</span>';
							} else if (storageStatus == '1') {
								span = '<span style="color: #64edff">进行中</span>';
							}
							tables[3] = span;
							allDatas.push(tables);
						}
						self.configData3.data = allDatas;
						self.configData3 = Object.assign({}, self.configData3);
					}
				});
			},

			getFirstPageOrderUnBackStorageList() {
				let self = this;
				self.$http({
					url: "/jinl/firstPage/getFirstPageOrderUnBackStorageList",
					method: "post",
					params: { notToken: true }
				}).then(resp => {
					self.configData2.data = [];
					if (resp.success) {
						let allDatas = [];
						for (let data of resp.result) {
							let tables = [];
							tables[0] = '退货';
							tables[1] = data.customer;
							tables[2] = data.itemTypeId;
							tables[3] = data.gradeValue;
							let orderBackStatus = data.orderBackStatus;
							let span = '';
							if (orderBackStatus == '0') {
								span = '<span style="color: #3CA4FF">待报数</span>';
							} else if (orderBackStatus == '1') {
								span = '<span style="color: #64edff">待确认</span>';
							} else if (orderBackStatus == '2') {
								span = '<span style="color: #9e9e9e">待入库</span>';
							} else if (orderBackStatus == '3') {
								span = '<span style="color: #FFC522">待处理</span>';
							}
							tables[4] = span;
							allDatas.push(tables);
						}
						let distSize = 5 - allDatas.length;
						if (distSize > 0) {
							for (let i = 0; i < distSize; i++) {
								allDatas.push({});
							}
						}
						self.configData2.data = allDatas;
						self.configData2 = Object.assign({}, self.configData2);
					}
				});
			},

			getTodayOrderOutInfoList() {
				let self = this;
				let today = formatDate(new Date(), 'yyyy/MM/dd')
				self.$http({
					url: "/jinl/firstPage/getTodayOrderOutInfoList",
					method: "post",
					params: { notToken: true }
				}).then(resp => {
					self.configData.data = [];
					self.taskDetail.add = 0;
					self.taskDetail.sending = 0;
					if (resp.success) {
						let allDatas = [];
						for (let data of resp.result) {
							let tables = [];
							tables[0] = data.orderOutCode;
							tables[1] = data.customer;
							tables[2] = data.orderCount;
							tables[3] = data.driver;
							tables[4] = data.orderOutTime;
							let orderOutStatus = data.orderOutStatus;
							let span = '';
							if (orderOutStatus == '0') {
								span = '<span style="color: #ffc107">待发货</span>';
								++self.taskDetail.sending;
							} else if (orderOutStatus == '1') {
								span = '<span style="color: #9e9e9e">已完成</span>';
							}
							if (today == tables[4]) {
								++self.taskDetail.add;
							}

							tables[5] = span;
							allDatas.push(tables);
						}
						self.configData.data = allDatas;
						self.configData = Object.assign({}, self.configData);
					}
				});
			},


			async getWeather() {
				let self = this;
				self.$http({
					url: "/jinl/firstPage/getForecast",
					method: "post",
					params: { cityCode: '101220701', notToken: true }
				}).then(resp => {
					let result = resp.result;
					let weather = result ? result.data.forecast[0] : {};
					let high = weather.high;
					let low = weather.low;
					let type = weather.type;
					high = high.replace(/[^0-9]/gi, "");
					low = low.replace(/[^0-9]/gi, "");
					self.weather = type + low + ' - ' + high
					if (type.indexOf('雨') > -1) {
						self.weatherImg = require('@/assets/back_manage_img/xaiyu.png');
					}
					if (type.indexOf('晴') > -1) {
						self.weatherImg = require('@/assets/back_manage_img/qingtian.png');
					}
					if (type.indexOf('云') > -1 || type.indexOf('阴') > -1) {
						self.weatherImg = require('@/assets/back_manage_img/tianqi.png');
					}
				});
			},
		},
		mounted() {
			this.cgrw = this.generateRandomInRange(95);
			this.wlrk = this.generateRandomInRange(99);
			this.ddfh = this.generateRandomInRange(98);
			this.kczz = this.generateRandomInRange(98);
			setInterval(() => {
				this.cgrw = this.generateRandomInRange(95);
				this.wlrk = this.generateRandomInRange(99);
				this.ddfh = this.generateRandomInRange(98);
				this.kczz = this.generateRandomInRange(98);
			}, 1000 * 60 * 60 * 24);
			let self = this;
			setInterval(() => {
				self.getdateFormat();
			}, 1000);
			self.getWeather();
			setInterval(() => {
				self.getWeather();
			}, 1000 * 3600);

			self.pageShow();
			self.getProcureTaskingList();
			setInterval(() => {
				self.getProcureTaskingList();
			}, 1000 * 60);

			self.getTodayOrderOutInfoList();
			setInterval(() => {
				self.getTodayOrderOutInfoList();
			}, 1000 * 60);

			self.getFirstPageOrderUnBackStorageList();
			setInterval(() => {
				self.getFirstPageOrderUnBackStorageList();
			}, 1000 * 46);

			function calculateDaysBetweenDates(startDate, endDate) {
				const start = new Date(startDate);
				const end = new Date(endDate);
				const millisecondsPerDay = 1000 * 60 * 60 * 24;
				const days = Math.floor((end - start) / millisecondsPerDay);
				return days;
			}
			const daysSinceMayFirst = calculateDaysBetweenDates('2024-05-01', new Date().toISOString());
			this.timestap = daysSinceMayFirst.toString();
		},
	};
</script>

<style scoped>
</style>